<template>
	<view class="con">
		<view :style="'height:'+sHeight+'px'" class="content">

			<view class="c_sec">
				<view class="q_title">
					<text class="cr_text1" v-text="nownum"></text>
					<u-parse :content="newData.title" />
				</view>
				<view class="q_choose">
					<!-- 单选题 -->
					<view class='qc_dx'>
						<radio-group @change='answerChange'>
						<!-- 	<label class="pd_item" v-for="(it,index2) in newData.answerList" :key='index2'>
								<view class="pdi_left">
									<radio :value="it.value" :checked="newData.userAnswer==it.value?true:false"
										style="transform:scale(0.8)" color="#62B6FF"></radio>
								</view>
								<view class="pdi_right" v-text="it.label"></view>
							</label> -->
							
							<label class="pd_item" v-for="(value,key) in newData.mapList[0] " :key="key">
								<view class="pdi_left">
									<radio :value="key"  :checked="newData.userAnswer==key?true:false"
										style="transform:scale(0.8)" color="#62B6FF" >
									</radio>
								</view>
								<view class="pdi_right"> {{value}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="c_thi">
				<view class="ct_fir" v-if="issubmit">
					<view class="ctf_item">正确答案： <text class="ci_t" v-text=" newData.ansert"></text></view>
					<view class="ctf_item">你的答案： <text :class=" newData.ansert== newData.userAnswer?'ci_c':'ci_w'"
							v-text=" newData.userAnswer"></text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/pxing-exam/u-parse/u-parse.vue';
	import uniIcons from "@/components/pxing-exam/uni-icons/uni-icons.vue";
	import uniPopup from '@/components/pxing-exam/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/pxing-exam/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/pxing-exam/uni-popup/uni-popup-dialog.vue';
	export default {
		name: 'pxingExam',
		components: {
			uParse,
			uniIcons,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		computed: {
			noData() {
				return "";
			},
			imgprop() {
				let imgprop = {
					lozyLoad: true,
					domain: ""
				}
				return imgprop;
			}
		},
		props: {

			examlist: { //考试题目列表
				type: Object,
				default: {}
			},
			nownum: { //当前题目num
				type: Number,
				default: 1
			},

		},
		watch: {
			examlist: {
				immediate: true,
				handler(n, o) {
					this.newData = n;
				}
			},

		},
		data() {
			return {
				sHeight: 0,

				newData: this.$props.examlist,
				examTotal: 0,
				tempUserAnswer: '',
				issubmit: false,
				lastUserAnswer: [],

			};
		},
		mounted() {
			this.getheight();
		},
		methods: {





			answerChange(e) {
				
				 let  daan= e.detail.value
				
				
				if (this.issubmit) {
					uni.showToast({
						title: '请耐心等待下一道题',
						icon: 'none'
					})
					return
				} else {
					this.issubmit = true
					this.newData.userAnswer = daan
					setTimeout(() => {
						//为了简答点，前端判断是否得分 
						if (this.newData.ansert == this.newData.userAnswer.toUpperCase()) {
							
							this.$emit('getEveryAnswer', this.newData.userAnswer.toUpperCase(), 5)
						} else {
							this.$emit('getEveryAnswer', this.newData.userAnswer.toUpperCase())
						}
							this.issubmit = false
					}, 1000);
				
				}




			},


			async getheight() {
				var sh = 0;
				var that = this;
				var windowInfo = uni.getSystemInfo({
					success(res) {
						that.sHeight = res.windowHeight;
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/components/pxing-exam/iconfont.css";

	.con {
		width: 100%;

		.content {
			width: 100%;

			.c_fir {
				width: 94%;
				padding: 0 3%;
				height: 80upx;
				background-color: #f6f6f6;
				display: flex;

				.cf_left {
					width: 70%;
					height: 80upx;
					line-height: 80upx;

					.cl_text {
						font-size: 28upx;
						color: #999;
					}
				}

			}

			.c_sec {
				width: 94%;
				margin: 0 auto;

				.q_title {
					width: 100%;
					margin-top: 20upx;
					font-size: 28upx;
					color: #333;
					display: flex;

					.cr_text1 {
						color: red;
						font-size: 30rpx;
					}
				}

				.q_choose {
					width: 100%;

					.qc_dx {
						width: 100%;
						margin-top: 24upx;
						padding-bottom: 24upx;

						.pd_item {
							width: 100%;
							display: flex;

							.pdi_left {
								width: 10%;
								padding: 12upx 0;
							}

							.pdi_right {
								width: 90%;
								padding: 16upx 0;
								font-size: 28upx;
							}
						}
					}
				}

				.q_btn {
					width: 98%;
					display: flex;
					justify-content: flex-end;
					height: 60upx;
					margin-bottom: 24upx;

					.qb_next {
						opacity: 0.8;
						margin-right: 22upx;
						width: 130upx;
						height: 60upx;
						line-height: 60upx;
						background-color: #62B6FF;
						color: #fff;
						text-align: center;
						font-size: 26upx;
						border-radius: 120upx;
					}
				}
			}

			.c_thi {
				width: 100%;
				padding: 24upx 0;

				.ct_fir {
					width: 94%;
					padding: 0 3%;
					display: flex;
					height: 80upx;

					.ctf_item {
						width: fit-content;
						margin-right: 3%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26upx;

						.ci_t {
							color: #62B6FF;
						}

						.ci_c {
							color: #2c9678;
						}

						.ci_w {
							color: #ee2746;
						}
					}
				}

				.ct_sec {
					width: 94%;
					margin: 20upx auto 0;
					height: 80upx;
					display: flex;
					border-bottom: 1px solid #f6f6f6;

					.cts_left {
						width: 6%;
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: center;

						.cl_img {
							width: 50upx;
							height: 32upx;
						}
					}

					.cts_right {
						width: 80%;
						height: 80upx;
						font-size: 28upx;
						color: #333;
						font-weight: 700;
						line-height: 80upx;
					}
				}

				.ct_thi {
					width: 94%;
					margin: 0 3%;
					font-size: 26upx;
					color: #666;
					margin-top: 20upx;
					padding-bottom: 20upx;
				}
			}
		}

		.answer {
			border-radius: 50%;
			width: 80upx;
			height: 80upx;
			background-color: #62B6FF;
			opacity: 0.8;
			position: fixed;
			bottom: 80upx;
			right: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.a_img {
				width: 48upx;
				height: 48upx;
			}
		}

		.dtk {
			width: 86vw;
			height: 80vh;
			background-color: #fff;
			border-radius: 8upx;

			.d_title {
				width: 94%;
				padding: 0 3%;
				height: 7vh;
				display: flex;
				border-bottom: 1px solid #f6f6f6;

				.ct_left {
					width: 80%;
					height: 7vh;
					font-size: 30upx;
					color: #333;
					letter-spacing: 4upx;
					font-weight: 700;
					line-height: 7vh;
				}

				.ct_right {
					width: 20%;
					height: 7vh;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

			.d_con {
				width: 94%;
				padding-top: 12upx;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;

				.dc_item {
					width: 20%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100upx;

					.dci_num {
						width: 60upx;
						height: 60upx;
						background-color: #62B6FF;
						border-radius: 50%;
						text-align: center;
						line-height: 60upx;
						color: #fff;
						font-size: 24upx;
					}

					.dci_num2 {
						width: 60upx;
						height: 60upx;
						background-color: #eee;
						border-radius: 50%;
						text-align: center;
						line-height: 60upx;
						color: #999;
						font-size: 24upx;
					}
				}
			}

			.d_btn {
				width: 100%;
				height: 6vh;
				background-color: #62B6FF;
				position: absolute;
				text-align: center;
				line-height: 6vh;
				color: #fff;
				font-size: 28upx;
				letter-spacing: 4upx;
				bottom: 0;
				border-radius: 0 0 8upx 8upx;
			}
		}
	}
</style>
